<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

	<div class="lesson-page-wrapper">
        <!-- reuse this lesson-page-wrapper block for each 'page' of content in your lesson -->
		<!-- include content here, or can be placed in another location. Content will be presented via asciidocs files,
		which you put in src/main/resources/lessonplans/{lang}/{fileName}.adoc -->
		<div class="adoc-content" th:replace="~{doc:lessons/httpbasics/documentation/HttpBasics_plan.adoc}"></div>
	</div>

	<div class="lesson-page-wrapper">
		<!-- reuse this block for each 'page' of content -->
        <!-- sample ascii doc content for second page -->
		<div class="adoc-content" th:replace="~{doc:lessons/httpbasics/documentation/HttpBasics_content1.adoc}"></div>
        <!-- if including attack, reuse this section, leave classes in place -->
		<div class="attack-container">
			<div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
			<!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
            <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
            <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
			<form class="attack-form" accept-charset="UNKNOWN"
				method="POST" name="form"
				th:action="@{/HttpBasics/attack1}">
				<div id="lessonContent">
					<form accept-charset="UNKNOWN" method="POST" name="form"
						th:action="@{/#attack/307/100}">
						Enter your name: <input name="person" value="" type="TEXT"/><input
							name="SUBMIT" value="Go!" type="SUBMIT" class="spacing"/>
					</form>
				</div>
			</form>
			<!-- do not remove the two following div's, this is where your feedback/output will land -->
			<div class="attack-feedback"></div>
			<div class="attack-output"></div>
			<!-- ... of course, you can move them if you want to, but that will not look consistent to other lessons -->
		</div>

	</div>

	<div class="lesson-page-wrapper">
        <!-- reuse this lesson-page-wrapper block for each 'page' of content in your lesson -->
        <!-- include content here. Content will be presented via asciidocs files,
        which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
		<div class="adoc-content" th:replace="~{doc:lessons/httpbasics/documentation/HttpBasics_content2.adoc}"></div>
		<div class="attack-container">
			<div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
			<!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
                <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
                <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
                <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
				<form class="attack-form" accept-charset="UNKNOWN"
					method="POST" name="form"
					th:action="@{/HttpBasics/attack2}">
					<script>
					    // sample custom javascript in the recommended way ...
					    // a namespace has been assigned for it, but you can roll your own if you prefer
					    webgoat.customjs.assignRandomVal = function () {
							var x = Math.floor((Math.random() * 100) + 1);
							document.getElementById("magic_num").value = x;
						};
						webgoat.customjs.assignRandomVal();
					</script>
					<input type="hidden" name="magic_num" id="magic_num" value="foo" />
					<table>
						<tr>
							<td>Is this form sending a POST or a GET:</td>
							<td><input name="answer" value="" type="TEXT" /></td>
							<td></td>
						</tr>
						<tr>
							<td>What is the magic number:</td>
							<td><input name="magic_answer" value="" type="TEXT" /><input
								name="SUBMIT" value="Go!" type="SUBMIT" class="spacing" /></td>
							<td></td>
						</tr>
					</table>
				</form>
				<!-- do not remove the two following div's, this is where your feedback/output will land -->
				<div class="attack-feedback"></div>
				<div class="attack-output"></div>
				<!-- ... of course, you can move them if you want to, but that will not look consistent to other lessons -->
		</div>
	</div>

</html>
